<template>
  <div>
    <div class="title">质量检查</div>
    <div class="quality shadow">
      <el-radio-group style="margin: 0 245px" v-model="qualityTab" @change="getList">
        <el-radio-button label="1">今日</el-radio-button>
        <el-radio-button label="2">本月</el-radio-button>
      </el-radio-group>
      <div class="tj">
        <span>
          开单总数：
          <span style="color: #3e6cff">{{dataObj.totalCount}}</span>
        </span>
        <span style="margin-left: 20px">
          完成率：
          <span style="color: #3e6cff">{{dataObj.comRate}}%</span>
        </span>
      </div>
      <div class="head">
        <div class="item">部门</div>
        <div class="item">考核告知书</div>
        <div class="item">完成率</div>
        <div class="item">安全隐患告知书</div>
        <div class="item">完成率</div>
        <div class="item">违纪整改告知书</div>
        <div class="item">完成率</div>
        <div class="item">合计单数</div>
        <div class="item">平均完成率</div>
      </div>
      <div class="list">
        <div class="line" v-for="(item, index) in tableList" :key="index">
          <div class="item">{{item.groupName}}</div>
          <div class="item">{{item.khCount}}</div>
          <div class="item">{{item.khComRate}}%</div>
          <div class="item">{{item.aqCount}}</div>
          <div class="item">{{item.aqComRate}}%</div>
          <div class="item">{{item.zgCount}}</div>
          <div class="item">{{item.zgComRate}}%</div>
          <div class="item">{{item.totalCount}}</div>
          <div class="item">{{item.avgComRate}}%</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {getStatistics} from '@/api/home'
export default {
  data() {
    return {
      qualityTab: 1,
      tableList: [],
      dataObj: {}
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      try {
        const res = await getStatistics({type: this.qualityTab})
        this.tableList = res.data && res.data.list || []
        this.dataObj = res.data || {}
      } catch (error) {

      }
    }
  }
}
</script>
<style lang="scss" scoped>
.quality {
  margin: 15px 0;
  padding: 20px;
  .tj {
    font-size: 14px;
    color: #333333;
  }
  .head {
    display: flex;
    justify-content: space-between;
    font-weight: 500;
    color: #82899e;
    padding: 10px;
    border-bottom: 2px solid #b7c0df;
    .item {
      font-size: 14px;
    }
  }
  .list {
    font-size: 14px;
    color: #333333;
    height: 120px;
    overflow: auto;
    .line {
      display: flex;
      padding: 10px;
    }
    .line:nth-child(2n) {
      background: rgba(183, 192, 223, 0.1);
    }
  }
  .item {
    flex: 1;
    text-align: center;
  }
}


/* 宽度和高度 */
::-webkit-scrollbar {
  width: 5px; /* 竖向滚动条宽度 */
  height: 8px; /* 横向滚动条高度 */
}

/* 轨道背景 */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* 滑块 */
::-webkit-scrollbar-thumb {
  background: #bebebe;
  border-radius: 10px;
}

/* 当滚动条被悬停时的滑块 */
::-webkit-scrollbar-thumb:hover {
  background: #afafaf;
}
</style>
